<template>
  <div id="app">
    <div class="homet_title_content">
      <img src="./assets/home/avater.png" class="avater_content" />
      <span>我的个人主页</span>
    </div>
    <router-view />
  </div>
</template>

<style lang="stylus">
@import "styles/common_color.styl"
@import "styles/common_padding_margin.styl"
@import "styles/base_text_style.styl"

body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, p, h1, h2, h3, h4, h5, h6, i, b, textarea, button, input, select, figure, figcaption {
    padding: 0;
    margin: 0;
    list-style: none;
    font-style: normal;
    text-decoration: none;
    border: none;
    font-weight: normal;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;

    &:hover {
        outline: none;
    }
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background-color: #000000;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
    border-radius: 10px;
    background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #555;
}
#app
    font-family Avenir, Helvetica, Arial, sans-serif
    -webkit-font-smoothing antialiased
    -moz-osx-font-smoothing grayscale
    color #2c3e50
    display flex;
    flex-direction column;
    background #f7f7f7;
    height 100vm;
    width 100vm;

.homet_title_content
    display flex;
    background-color #0055ff
    padding 8px 12px;
    width 100%;
    align-items center;
    color: #000
    .avater_content
        height 40px;
        width 40px;
        border-radius 20px;
    span
        padding-left 8px;
</style>
<script>
export default {
  components: {}
};
</script>
